/* 封装移动端点击事件 */ 
/*
    移动端点击事件（利用触摸模拟）的特点：
        1.有且只能有一根手指点击
        2.点击时，允许在一定范围内有轻微抖动
        3.点击时，点击的时间长短需限制（一般行业设置该时间差为300ms内，则可设置为200ms）
*/ 
var heima = {
    /* 移动端点击事件 */ 
    tap : function(dom,callback){
        // 全局变量
        var startX,startY,moveX,moveY,distanceX=0,distanceY=0;
        var startTime,endTime;

        dom.addEventListener('touchstart',function(event){
            // 1.判断是否只有被点击元素对象只有1个
            if(event.targetTouches.length > 1) {
                return;
            };

            // 2.获取当前元素的X轴、y轴相应值
            startX = event.targetTouches[0].clientX;
            startY = event.targetTouches[0].clientY;

            // 3.获取当前触摸点击事件的时间
            startTime = Date.now();
            
        });

        dom.addEventListener('touchmove',function(event){
            // 1.获取移动过程中元素的X轴,Y轴的相应值
            moveX = event.targetTouches[0].clientX;
            moveY = event.targetTouches[0].clientY;

            // 2.计算抖动移动的范围
            distanceX = moveX - startX;
            distanceY = moveY - startY;

            // 3.判断移动范围是否已超出点击允许限制
            if(Math.abs(distanceX) > 6 || Math.abs(distanceY)> 6 ){
                return;
            }
        });

        dom.addEventListener('touchend',function(event){
            // 1.获取触摸结束瞬间的时间
            endTime = Date.now();
           
            // 2.判断时间是否超过点击的时间误差内
            if( endTime - startTime > 200 ){
                return;
            };

            callback && callback(event);
        });
    }
}
